
<template>
    <div class="options-panel">
        <div v-show="currentPanel == 'property'">

            <div class="panel-from">

                <div class="panel-form-item">
                    <div class="item-label">字段名</div>
                    <div class="item-input">
                        <a-input v-model:value="selectItem.field" placeholder="请输入" />
                    </div>
                </div>
                <div class="panel-form-item">
                    <div class="item-label">占位提示</div>
                    <div class="item-input">
                        <a-input v-model:value="selectItem.componentProps.placeholder" placeholder="请输入" />
                    </div>
                </div>
                
                <div class="panel-form-item">
                    <div class="item-label">尺寸</div>
                    <div class="item-input">
                        <a-select v-model:value="selectItem.componentProps.size" placeholder="请选择" style="width:100%">
                            <a-select-option value="large">large</a-select-option>
                            <a-select-option value="middle">middle</a-select-option>
                            <a-select-option value="small">small</a-select-option>
                        </a-select>
                    </div>
                </div>

                <div class="panel-form-item">
                    <div class="item-label">最小行数</div>
                    <div class="item-input">
                        <a-input-number v-model:value="selectItem.componentProps.autoSize.minRows" placeholder="请输入"
                            style="width: 100%;" />
                    </div>
                </div>

                <div class="panel-form-item">
                    <div class="item-label">最大行数</div>
                    <div class="item-input">
                        <a-input-number v-model:value="selectItem.componentProps.autoSize.maxRows" placeholder="请输入"
                            style="width: 100%;" />
                    </div>
                </div>

                <div class="panel-form-item">
                    <div class="item-label">输入长度</div>
                    <div class="item-input">
                        <a-input-number v-model:value="selectItem.componentProps.maxlength" placeholder="请输入"
                            style="width: 100%;" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">有边框</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.bordered" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">统计字数</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.showCount" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">禁用</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.disabled" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">隐藏</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.hidden" />
                    </div>
                </div>

            </div>
        </div>

        <div v-show="currentPanel == 'style'">
        </div>

        <!-- <div v-show="currentPanel == 'actions'">
            <a-alert message="正在开发中..." type="warning" show-icon />
        </div> -->
    </div>
</template>

<script>
export default {
    name: "textareaOptions",
    props: {
        currentPanel: {
            type: String,
            default: "property"
        },
        selectItem: {
            type: Object,
        }
    },
    data() {
        return {
        }
    },
    methods: {
    },
    created() {
    },
}
</script>

<style lang="less" scoped>
</style>